<template>
    <section>
      <h2>
        正在进行<span>{{ runLen }}</span>
      </h2>
      <ol>
        <li v-for="(item,index) in todos" :key="item.id" v-show="!item.checked">
          <input type="checkbox" v-model="item.checked" />
          <!-- 点击p标签的时候进行编辑 -->
          <p v-if="!item.edit" @dblclick="dbHandle(item)">{{ item.content }}</p>
          <input
            v-else
            :ref="autoInput"
            type="text"
            v-model="item.content"
            @blur="blurHandle(item)"
            style="width: 80%; margin-left: 30px"
          />
          <a href="javascript:;" @click="emit('delItem',index)">-</a>
        </li>
      </ol>
    </section>
  </template>
  <script setup>
  import {computed } from 'vue'
    // 1.接收数据 
    let {todos}  = defineProps({
        todos:Array
      })
    // 2.计算属性 统计正在进行的项目的个数
     let runLen = computed(()=>{
        return todos.filter(item=>!item.checked).length
      })
    //3. 删除功能-========子传父 删除======
    let emit = defineEmits(['delItem'])
    //4. 双击的事件 进入编辑状态
    const dbHandle = (row)=>{
      row.edit = true
    }
    // 5. 失去焦点 编辑完成
    const blurHandle = (row)=>{
      row.edit = false
    }
    // 6. 双击之后 获取焦点
    let autoInput = (el)=>{
      el&&el.focus()
      // 数据更新 会触发 这个函数 当 编辑完成状态时, el是null 所以我们需要判断;
    }
  
  </script>
  <script>
  export default {
    name: 'runningCom',
  }
  </script>
  <style scoped>
  ol {
    padding: 0;
    list-style: none;
  }
  ol li {
    cursor: move;
  }
  </style>
  ​